<script setup>
import { ElText } from "element-plus";
import { ref, computed } from "vue";
const column = 4;
const label_span = 2;


const fields = [{
  "title": "名称",
  "span": 1,
  "component": ElText
}, {
  "title": "content",
  "span": 5,
  "component": ElText
}, {
  "title": "名称",
  "span": 1,
  "component": ElText
}, {
  "title": "content",
  "span": 5,
  "component": ElText
}, {
  "title": "名称",
  "span": 1,
  "component": ElText
}, {
  "title": "content",
  "span": 5,
  "component": ElText
}, {
  "title": "名称",
  "span": 1,
  "component": ElText
}, {
  "title": "content",
  "span": 5,
  "component": ElText
}, {
  "title": "名称",
  "span": 1,
  "component": ElText
}, {
  "title": "content",
  "span": 23,
  "component": ElText
}];

const rows = ref(fields)

</script>
<template>
  <el-row :gutter="3">
    <el-col v-for="col in rows" :span="col.span">
      {{ col.title }}
    </el-col>
  </el-row>
</template>
<style>
.el-col {
  border-radius: 30px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  background-color: #ccc;
}
</style>